<template>
  <div>
    <div class="app-banner">
      <slider animation="normal" width="100%" height="560px">
        <slider-item v-for="(i, index) in banner" :key="index">
          <div :style="i">
            <!-- <p style="line-height: 280px; font-size: 5rem; text-align: center;">Page{{ index + 1 }}</p> -->
          </div>
        </slider-item>
      </slider>
    </div>
    <div class="app-section">
      <div class="section-inner">
        <div class="section-left">
          <div class="latestActivites">
            <h2>
              最新活动
              <span>更多>></span>
            </h2>
            <slider width="100%" height="160px" :interval="3000" :speed="1000" indicators="right" :control-btn="false" animation="fade">
              <slider-item v-for="(item, index) in latestActivites" :key="index">
                <div>
                  <img class="pic" :src="item.src"> 
                  <div class="title">
                    <p>{{item.title}}</p>
                  </div>
                </div>
              </slider-item>
            </slider>
          </div>
          <ul class="quickEntrance">
            <router-link v-for="item in quickEntrance" :to="{ path: item.path }" tag="li">
               <img :src="item.img"> 
            </router-link>
          </ul>
        </div>
        <div class="section-right">
          <div class="productAlert">
            <h2>产品速递</h2>
            <ul>
              <li class="list" v-for="item in productAlert">
                <div class="pic">
                  <router-link :to="{ path: item.path}" tag="img" :src="item.img"></router-link>
                </div>
                <div class="inf">
                  <div class="inf-top">
                    <router-link :to="{ path: item.path}" tag="h3">{{item.title}}</router-link>
                    <!-- <h3>{{item.title}}</h3> -->
                    <span>{{item.date}}</span>
                  </div>
                  <p class="txt">{{item.content}}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Slider, SliderItem } from 'vue-easy-slider'

export default {
  name: 'component_name',
  components: {
    Slider,
    SliderItem
  },
  data () {
    return {
      banner: [
        { background: 'url(' + require('assets/images/banner_01.jpg') + ') center', width: '100%', height: '100%' },
        { background: 'url(' + require('assets/images/banner_02.jpg') + ') center', width: '100%', height: '100%' },
        { background: 'url(' + require('assets/images/banner_03.jpg') + ') center', width: '100%', height: '100%' }
      ],
      latestActivites: [
        {
          title: 'page1',
          src: require('assets/images/banner_01.jpg')
        },
        {
          title: 'page2',
          src: require('assets/images/banner_02.jpg')
        },
        {
          title: 'page3',
          src: require('assets/images/banner_03.jpg')
        }
      ],
      productAlert: [
        {
          path: '/productsAndServers',
          title: '华大基因首推—— 基于10 X Genomics平台的高通量单细胞RNA-Seq',
          date: '2017-06-18',
          img: require('assets/images/cpsd_03.jpg'),
          content: '华大基因全新推出的基于10 X Genomics平台，集细胞分选、液滴生成、文库构建、测序及信息分析为一体化服务的高通量单细胞RNA-Seq，能够快速、准确、低成本、大批量的单细胞样本，是癌症、生殖发育、神v选、液滴生成、文库构建、测序及信息分析为一体化服务的高通量单细胞RNA-'
        },
        {
          path: '/',
          title: 'LncRNA Seq为您心动&满意而变',
          date: '2017-06-18',
          img: require('assets/images/cpsd_06.jpg'),
          content: '2017版LncRNA产品凝集10000+项目分析经验之精华，从分析内容、分析软件、数据库到分析结果，以实际研究需求出发，多角'
        },
        {
          path: '/',
          title: '人全基因组重测序（WGS）买五送一，低至40元/G',
          date: '2017-06-18',
          img: require('assets/images/cpsd_11.jpg'),
          content: '测试样本选用了“瓶中基因组（Genome in a Bottle）”的人类样本NA12878，这是目前被世界上认为研究最透彻的'
        },
        {
          path: '/',
          title: '有实力，更要漂亮 全新转录组震撼登场有实力，更要漂亮 全新转录组震撼',
          date: '2017-06-18',
          img: require('assets/images/cpsd_15.jpg'),
          content: '刚过去的2016年，华大基因BGISEQ-500平台经过不断研发，一直持续带给科研工作者惊喜。'
        }
      ],
      quickEntrance: [
        {
          path: '/',
          img: require('assets/images/system_01.jpg')
        },
        {
          path: '/',
          img: require('assets/images/system_02.jpg')
        },
        {
          path: '/',
          img: require('assets/images/system_03.jpg')
        }
      ]
    }
  },
  methods: {
    getParam () {
      // console.log(this.$route.params)
    }
  }
}
</script>

<style>
  .latestActivites .pic {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .latestActivites .indicators{
    bottom: 8px;
  }
  .latestActivites .indi-right{
    right: 12px;
  }
  .latestActivites .slider-indicator-icon{
    width: 8px;
    height: 8px;
    margin: 0 2px;
    background: rgba(255, 255, 255, 0.72);
  }
  .latestActivites .slider-indicator-active{
    background: rgb(96, 167, 255);
  }
</style>

<style lang="css" scoped>
  .section-left{
    flex: 0 0 320px;
    width: 320px;
  }
  .latestActivites h2{
    position: relative;
    height: 32px;
    line-height: 32px;
    padding-left: 6px;
    font-size: 14px;
    background: #fff;
  }
  .latestActivites h2 span{
    position: absolute;
    top: 0;
    right: 12px;
    font-size: 12px;
    color: #9a9a9a;
    cursor: pointer;
  }
  .latestActivites .title{
    width: 100%;
    line-height: 28px; 
    font-size: 12px; 
    text-align: left;
    text-indent: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .latestActivites .title p{
    padding-right: 64px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .section-right{
    flex: 1;
    margin-left: 20px;
  }
  .productAlert{
    padding: 8px 20px 32px 20px;
    background: #fff;
  }
  .productAlert h2{
    margin-bottom: 8px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    border-bottom: 2px solid #48a8ff;
  }
  .productAlert .list{
    position: relative;
    min-height: 80px;
    padding: 12px 0;
    border-bottom: 1px dashed #dedede;
  }
  .productAlert .list:last-child{
    border-bottom: 0;
  }
  .productAlert .list .pic{
    width: 140px;
    height: 80px;
    position: absolute;
    top: 12px;
    left: 0;
  }
  .productAlert .list .pic img{
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  .productAlert .list .inf{
    padding-left: 160px;
  }
  .productAlert .list .inf .inf-top{
    display: flex;
  }
  .productAlert .list .inf .inf-top h3{
    flex: 1;
    font-size: 16px;
    line-height: 32px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
  }
  .productAlert .list .inf .inf-top h3:hover{
    color: #0f6abd;
    text-decoration: underline;
  }
  .productAlert .list .inf .inf-top span{
    flex: 0 0 120px;
    width: 120px;
    font-size: 14px;
    line-height: 32px;
    color: #9a9a9a;
    text-align: right;
  }
  .productAlert .list .inf p.txt{
    font-size: 14px;
    line-height: 20px;
    color: #6a6a6a;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .quickEntrance li{
    position: relative;
    width: 100%;
    height: 84px;
    margin-top: 12px;
    overflow: hidden;
    cursor: pointer;
  }
  .quickEntrance li:hover img{
    width: 104%;
    position: absolute;
    top: -2%;
    left: -2%;
  }
</style>
